﻿@page
@{ Layout = "_Layout"; }

<el-alert>用户组的投稿范围为关联管理员拥有权限的站点及栏目，如果不设置关联管理员则用户组将被禁止投稿。</el-alert>

<el-table :data="groups" style="width: 100%; margin-top: 10px">
  <el-table-column label="用户组" prop="groupName"></el-table-column>
  <el-table-column label="关联管理员">
    <template slot-scope="scope">
      <el-link
        :underline="false"
        v-on:click="btnAdminClick(scope.row.adminName)"
        type="primary">
        {{ scope.row.adminName }}
      </el-link>
    </template>
  </el-table-column>
  <el-table-column label="操作" width="130">
    <template slot-scope="scope">
      <el-link
        :underline="false"
        v-on:click="btnEditClick(scope.row)"
        type="primary">
        编辑
      </el-link>
      <el-link
        :underline="false"
        v-if="scope.row.id > 0"
        type="danger"
        v-on:click="btnDeleteClick(scope.row)">
        删除
      </el-link>
    </template>
  </el-table-column>
</el-table>

<div style="height: 10px"></div>
<el-divider></el-divider>
<div style="height: 10px"></div>

<el-button size="small" plain type="primary" icon="el-icon-plus" v-on:click="btnAddClick">
  新增用户组
</el-button>

<el-drawer
  id="form"
  v-if="form"
  :title="form.id !== -1 ? '修改用户组' : '添加用户组'"
  :visible.sync="panel"
  destroy-on-close
  direction="rtl"
  size="50%">
  <div class="drawer__content">
    <el-form size="small" ref="form" :model="form" label-width="150px" :rules="{
      groupName: [
          { required: true, message: '请输入用户组名称' }
        ]
      }">
      <el-form-item label="用户组名称" prop="groupName">
        <el-input v-model="form.groupName" placeholder="请输入用户组名称"></el-input>
      </el-form-item>
      <el-form-item label="关联管理员" prop="adminName">
        <el-select v-model="form.adminName" placeholder="请选择关联管理员">
          <el-option value="" label="<不设置>"></el-option>
          <el-option v-for="adminName in adminNames" :key="adminName" :value="adminName">
            {{ adminName }}
          </el-option>
        </el-select>
        <div class="tips">
          关联管理员定义用户组的投稿权限，用户组的投稿权限将被限制在此管理员的权限范围内
        </div>
      </el-form-item>

      <el-divider></el-divider>
      <div class="drawer__footer">
        <el-button type="primary" v-on:click="btnSubmitClick" size="small">确 定</el-button>
        <el-button size="small" v-on:click="btnCancelClick">取 消</el-button>
      </div>
    </el-form>
  </div>
</el-drawer>

@section Scripts{
<script src="/sitefiles/assets/js/admin/settings/usersGroup.js" type="text/javascript"></script> }